<link rel="stylesheet" href="http://at.alicdn.com/t/font_1996171_ca2z2q8pp1h.css">
<div class="app-container">
    <div class="app-card">
      <div class="app-logo">
        <img src="../assets/logo.png" alt="logo" width="200px">
      </div>
      <div class="app-tabs">
        <ul>
          <li (click)="tabChange(true)" [class]="login ? 'tab-active' : '' ">登录</li>
          <li (click)="tabChange(false)" [class]="login ? '' : 'tab-active' ">注册</li>
        </ul>
      </div>
      <div *ngIf="login; then thenBlock else elseBlock"></div>
      <ng-template #thenBlock>
        <table class="app-form" width="100%">
          <tr>
            <td>
              <span class="app-form-name">用户名</span>
            </td>
            <td>
              <input [(ngModel)]="loginForm.name" class="app-form-input" type="text"/>
            </td>
          </tr>
          <tr>
            <td>
              <span class="app-form-name">密码</span>
            </td>
            <td>
              <input type="password" [(ngModel)]="loginForm.password" class="app-form-input" />
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <button class="app-button" (click)="loginBtn()">登录</button>
            </td>
          </tr>
        </table>
      </ng-template>
      <ng-template #elseBlock>
        <table class="app-form" width="100%" height="100%">
          <tr>
            <td>
              <span class="app-form-name">手机号</span>
            </td>
            <td>
              <input class="app-form-input" placeholder="请输入手机号" type="text" [(ngModel)]="registerForm.phone" />
            </td>
          </tr>
          <tr>
            <td>
              <span class="app-form-name">用户名</span>
            </td>
            <td>
              <input class="app-form-input" placeholder="英文字母和数字组成的4-16位字符，以字母开头" type="text" [(ngModel)]="registerForm.name" >
            </td>
          </tr>
          <tr>
            <td>
              <span class="app-form-name">密码</span>
            </td>
            <td>
              <input type="password" class="app-form-input" placeholder="密码由英文字母和数字组成的4-10位字符" [value]="registerForm.password" [(ngModel)]="registerForm.password" />
            </td>
          </tr>
          <tr>
            <td>
              <span class="app-form-name">确认密码</span>
            </td>
            <td>
              <input type="password" placeholder="请重复已输入密码" class="app-form-input" [value]="registerForm.confirmPassword" [(ngModel)]="registerForm.confirmPassword" />
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <button class="app-button" (click)="registerBtn()">注册</button>
            </td>
          </tr>
        </table>
      </ng-template>
    </div>
  </div>
  
  <div [class]="showMessage ? 'app-message app-message-show' : 'app-message app-message-hide'" >
    <p class="message-content"><i class="icon iconfont iconwarning-outline"></i>输入内容有误！请重新输入</p>
  </div>
  
  <div [class]="showResponse ? 'app-message app-message-show' : 'app-message app-message-hide'" >
    <p class="message-content"><i class="icon iconfont iconwarning-outline"></i>输入用户名或密码不正确！请重新输入</p>
  </div>
